<template>
    <div>
        <header>
            
            <div class="search">
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                    <el-form-item label="分类名称：">
                        <el-input placeholder="分类名称" v-model="searchData.searchName"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" icon="el-icon-search"  @click="search" size="medium">查询</el-button>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add" style="margin-bottom:20px;" size="medium">添加分类</el-button>
                </el-form>
            </div>
        </header>
        <div class="list">
            <div class="list-opate">
                <el-table :data="list.data" style="width: 100%" max-height="618">
                    <el-table-column prop="t_id" label="分类ID" align="center"></el-table-column>
                    <el-table-column prop="t_name" label="分类名称" align="center"></el-table-column>
                    <el-table-column prop="t_create_time" label="添加时间" align="center"></el-table-column>
                    <el-table-column prop="t_update_time" label="修改时间" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="look(scope.row)" type="text" size="small">查看种类</el-button>
                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分类 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
            <!-- 种类 -->
            <el-dialog :visible.sync="dialogTableVisible" center>
                <p style="margin: 10px 0px 25px;">分类名称：{{t_name}}</p>
                <!-- 查询种类 -->
                <div class="search">
                    <el-form :inline="true" :model="searchzlData" class="demo-form-inline">
                        <el-form-item label="种类名称：">
                            <el-input placeholder="种类名称" v-model="searchzlData.searchName"></el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" icon="el-icon-search"  @click="searchzl" size="medium">查询</el-button>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="typeAdd" style="margin-bottom:20px;" size="medium">添加种类</el-button>
                    </el-form>
                </div>
                
                <el-table :data="gridData.data">
                    <el-table-column prop="td_id" label="种类ID" align="center"></el-table-column>
                    <el-table-column prop="td_name" label="种类名称" align="center"></el-table-column>
                    <el-table-column prop="td_create_time" label="添加时间" align="center"></el-table-column>
                    <el-table-column prop="td_update_time" label="修改时间" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="typeEdit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="typeDel(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 种类 分页 -->
                <el-pagination :current-page="typeCurrent" @current-change="handletypeCurrentChange" :total="gridData.total" style="margin-top:30px;"></el-pagination>
            </el-dialog>

        </div>
    </div>
    
</template>
<script src='../../contral/type.js'></script>
